﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <link type="text/css" rel="stylesheet" media="all" href="styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="styles/global_color.css"/>

    <style>
        .required {
            display: none;
        }
    </style>
</head>
<body class="index">
<div class="login_box">
    <form id="loginForm" name="loginForm" action="/login" method="post">
        <table>
            <tr>
                <td class="login_info">账号：</td>
                <td colspan="2"><input id="adminCode" name="adminCode" type="text" class="width150"/></td>
                <td class="login_error_info"><span id="span1" class="required">5长度的字母、数字和下划线</span></td>
            </tr>
            <tr>
                <td class="login_info">密码：</td>
                <td colspan="2"><input id="password" name="password" type="password" class="width150"/></td>
                <td><span id="span2" class="required">5长度的字母、数字和下划线</span></td>
            </tr>
            <tr>
                <td class="login_info">验证码：</td>
                <td class="width70"><input id="code" name="code" type="text" class="width70"/></td>
                <td><img src="/admin/code" alt="验证码" title="点击更换" onclick="this.src='/admin/code?d='+Math.random();"/>
                </td>
                <td><span id="span3" class="required">验证码错误</span></td>
            </tr>
            <tr>
                <td></td>
                <td class="login_button" colspan="2">
                    <a type="button" id="btn1"><img src="images/login_btn.png"/></a>
                </td>
                <td><span id="span4" class="required">用户名或密码错误，请重试</span></td>
            </tr>
        </table>
    </form>
</div>

<script>
    $(function () {

        $('#adminCode').blur(function () {
            var r1 = /^[a-zA-Z0-9_]{5}/;
            var value = $('#adminCode').val();
            if (!r1.test(value)) {
                $('#span1').css("display", 'inline')
            }
            if (r1.test(value)) {
                $('#span1').css("display", 'none')
            }
        });
        $('#password').blur(function () {
            var r1 = /^[a-zA-Z0-9_]{5}/;
            var value = $('#password').val();
            if (!r1.test(value)) {
                $('#span2').css("display", 'inline')
            }
            if (r1.test(value)) {
                $('#span2').css("display", 'none')
            }
        });

        $('#btn1').click(function () {
            $.ajax({
                type: 'GET',
                url: "/admin/login",
                data: $('#loginForm').serialize(),
                success: function (resp) {
                    console.log(resp);
                    var code = resp.adminCode;
                    var password = resp.password;
                    var code1 = $('#code').val();
                    if (code == null) {
                        $('#span3').css("display", 'inline');
                        $('#span4').css("display", 'inline');
                    } else if (password == null) {
                        // $('#span3').css("display", 'inline');
                        $('#span4').css("display", 'inline');
                    } else if (code1.length === 0) {
                        $('#span3').css("display", 'inline');
                    } else if (resp == null) {
                        $('#span3').css("display", 'inline');
                    } else {
                        window.location.href = "/admin/showModule";
                    }
                }
            })
        })
    })
</script>
</body>
</html>
